<template>
  <div class="stationCon">
    <div>
      <a-skeleton :loading="skeLoading" active :paragraph="{ rows: 5 }">
        <a-row :gutter="16">
          <a-col :lg="12" :md="12" :sm="24">
            <a-card title="实时服务费" :bordered="false">
              <p class="nowfont">￥{{ nowSC| NumberFormat }}</p>
            </a-card>
          </a-col>
          <a-col :lg="12" :md="12" :sm="24">
            <a-card title="实时销售额" :bordered="false">
              <p class="nowfont">￥{{ nowSales| NumberFormat }}</p>
            </a-card>
          </a-col>
        </a-row>
      </a-skeleton>
    </div>
    <br />
    <div>
      <a-skeleton :loading="skeLoading" active :paragraph="{ rows: 6 }">
        <a-card class="card" title="本月业绩柱状图" :bordered="false">
          <a-skeleton :loading="skeLoading" active :paragraph="{ rows: 8 }">
            <bar :style="{padding: '24px 24px 0px 0px'}" :data="barData" title />
          </a-skeleton>
        </a-card>
      </a-skeleton>
    </div>
    <div style="margin-top:20px">
      <a-skeleton :loading="skeLoading" active :paragraph="{ rows: 20 }">
        <a-card class="card" title="小组排行" :bordered="false">
          <a-skeleton :loading="skeLoading" active :paragraph="{ rows: 8 }">
            <a-table
              :loading="groupLoading"
              :columns="columns"
              :dataSource="groupList"
              :rowKey="(record,index)=> index"
              :pagination="false"
            >
              <div slot="groupId" slot-scope="groupId">
                <a @click="openDialog(groupId)">查看详情</a>
              </div>
            </a-table>
          </a-skeleton>
        </a-card>
      </a-skeleton>
    </div>
    <a-modal title="组内详情" centered :width="680" v-model="modal1Visible">
      <a-table
        :loading="groupLoading2"
        :columns="columns2"
        :dataSource="groupList2"
        :rowKey="(record,index)=> index"
        :pagination="false"
      >
        <div slot="id" slot-scope="id">
          <a @click="goIssue(id)">查看出单详情</a>
        </div>
      </a-table>
    </a-modal>
  </div>
</template>

<script>
import { Bar } from '@/components'
import { getAllKpi, getMonthKpi, getGroupKpi, getGroupUserKpi } from '@/api/admin/user.js'
const columns = [
  {
    title: '序号',
    // dataIndex: 'index'
    customRender: (text, row, index) => {
      return index + 1
    }
  },
  {
    title: '小组',
    dataIndex: 'user'
  },
  {
    title: '今日业绩',
    dataIndex: 'estimate_commission'
  },
  {
    title: '人数',
    dataIndex: 'num'
  },
  {
    title: '组内平均',
    dataIndex: 'groupMean'
  },
  {
    title: '详情',
    dataIndex: 'groupId',
    scopedSlots: { customRender: 'groupId' }
  }
]

// 弹窗表头
const columns2 = [
  {
    title: '序号',
    customRender: (text, row, index) => {
      return index + 1
    }
  },
  {
    title: '名称',
    dataIndex: 'user'
  },
  {
    title: '业绩',
    dataIndex: 'estimate_commission'
  },
  {
    title: '详情',
    dataIndex: 'id',
    scopedSlots: { customRender: 'id' }
  }
]
// 弹窗数据
const groupList2 = [
  // {
  //   estimate_commission: '25.03',
  //   day: '2020-04-06',
  //   user: '乐推',
  //   id: 3
  // }
]

const groupList = [
  // {
  //   groupId: 1,
  //   user: 'scc',
  //   estimate_commission: 10000,
  //   num: 12,
  //   groupMean: 1200
  // }
]
export default {
  name: 'StationCon',
  components: {
    Bar
  },
  data () {
    return {
      skeLoading: true,
      nowSC: '',
      nowSales: '',
      barData: [],
      columns,
      groupList,
      columns2,
      groupList2,
      modal1Visible: false,
      groupLoading: false,
      groupLoading2: false
    }
  },
  computed: {},
  created () {
    this.getAllKpi()
    this.getMonthKpi()
    this.getGroupKpi()
  },
  filters: {
    NumberFormat: function (value) {
      if (!value) return '0.00'
      var intPart = Number(value) - Number(value) % 1 // 获取整数部分
      var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 将整数部分逢三一断
      var floatPart = '.00' // 预定义小数部分
      var value2Array = value.toString().split('.')
      //= 2表示数据有小数位
      if (value2Array.length === 2) {
        floatPart = value2Array[1].toString() // 拿到小数部分
        if (floatPart.length === 1) { // 补0,实际上用不着
          return intPartFormat + '.' + floatPart + '0'
        } else {
          return intPartFormat + '.' + floatPart
        }
      } else {
        return intPartFormat + floatPart
      }
    }
  },
  mounted () {},
  methods: {
    openDialog (val) {
      // console.log('id:' + val)
      this.getGroupUserKpi(val)
      this.modal1Visible = !this.modal1Visible
    },
    getAllKpi () {
      getAllKpi({})
        .then(res => {
          // console.log('res', res)
          this.skeLoading = false
          this.nowSC = res.result.estimate_commission
          this.nowSales = res.result.estimate_cos_price
          this.skeLoading = false
        })
        .catch(() => {
          console.log('null')
        })
    },
    getMonthKpi () {
      getMonthKpi({})
        .then(res => {
          this.skeLoading = false
          // console.log('res.result', res.result)
          this.barData = res.result.map(function (obj) {
            var rObj = {}
            rObj.x = obj.day
            rObj.y = obj.estimate_commission
            return rObj
          })
          // console.log('barData', this.barData)
        })
        .catch(err => {
          console.log(err)
        })
    },
    getGroupKpi () {
      this.groupLoading = true
      getGroupKpi({})
        .then(res => {
          // console.log('getGroupKpi', res.result)
          this.groupList = res.result
          this.groupLoading = false
        })
        .catch(() => {
          console.log('null')
          this.groupLoading = false
        })
    },
    getGroupUserKpi (value) {
      this.groupLoading2 = true
      getGroupUserKpi({
        groupId: value
      })
        .then(res => {
          // console.log('getGroupUserKpi', res.result)
          this.groupList2 = res.result
          this.groupLoading2 = false
        })
        .catch(() => {
          console.log('null')
          this.groupLoading2 = false
        })
    },
    goIssue (id) {
      this.modal1Visible = false
      this.$router.push({
        path: `/admin/issue-data/`,
        query: {
          id: id
        }
      })
    }
  }
}
</script>

<style lang='less' scoped>
.stationCon {
  .nowtitle {
    font-size: 25px;
    margin-bottom: 0;
  }
  .nowfont {
    margin-bottom: 0;
    text-align: center;
    font-size: 50px;
  }
}
@media screen and (max-width: 580px) {
  .stationCon {
    .nowtitle {
      font-size: 13px;
      margin-bottom: 0;
    }

    .nowfont {
      margin-bottom: 0;
      font-size: 30px;
      text-align: center;
    }
  }
}
</style>
